<template>
	<view class="f14" style="overflow: auto;">
		<view class="index p10">
			<view class="p-15-10 bs6 bf f14 c0">
				<view class="mb15">营业日</view>
				<view class="f-raw">
					<view class="item tac mr10 mb10 bs6" v-for="(item,index) in time"
						:class="timeId.includes(item.id)?'isItem':''" :key="index" :style="{border:timeId.includes(item.id)? '2rpx solid' +'#FD8906':'',
		color:timeId.includes(item.id)? '#FD8906':''}" @click="choose(item)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- <view class="p-15-10 bs6 bf f14 c0 dfbc mt10">
				<text>营业时段</text>
				<view class="w70">
					<u-radio-group v-model="frame" :activeColor="subColor" placement="row">
						<u-radio label="指定时间" :name="1"></u-radio>
						<u-radio label="全天营业" :name="2"></u-radio>
					</u-radio-group>
				</view>
			</view> -->
			<view>
				<view class="p-15-10 bs6 bf f14 c0 mt10 flex" v-for="(item,index) in frameList" :key="index">
					<view class="iconfont icon-jianshao mr10 cf5 f14" @click="reduce(index)"></view>
					<view  @click="edit(item,index)">
						{{item.start}}<text class="mlr5">~</text><text class="mr5" v-if="item.ciri">次日</text>{{item.end}}
					</view>
				</view>
				<view class="p-15-10 bs6 bf f14 dfa mt10 cf06" @click="show = true,ei=-1" v-if="frameList.length<3">
					<text class="iconfont icon-tianjia mr10" style="font-size:18px"></text>
					新增时间段
				</view>
				<u-picker :show="show" ref="uPicker" :closeOnClickOverlay="true" :columns="columns"
					@close="show = false" @cancle="show = false" @confirm="confirm" confirmColor="#FD8906">
				</u-picker>
			</view>
		</view>
		<view class="buts bf5 f14">
			<view class="p-0-20 mb10">
				<view class="c0 bs30 tac p10 wei" :style="{background:subColor}" @click="save">保存</view>
			</view>
			<view class="c8 tac pb40" @click="cancel">取消</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import {
		getPage
	} from '@/common/handutil.js'
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				time: [{
					id: 1,
					name: '周一'
				}, {
					id: 2,
					name: '周二'
				}, {
					id: 3,
					name: '周三'
				}, {
					id: 4,
					name: '周四'
				}, {
					id: 5,
					name: '周五'
				}, {
					id: 6,
					name: '周六'
				}, {
					id: 0,
					name: '周日'
				}],
				timeId: [],
				frame: 1,
				date: '2018-10-01',
				frameList: [],
				show: false,
				columns: [
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16',
						'17', '18', '19', '20', '21', '22', '23'
					],
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16',
						'17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
						'33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48',
						'49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'
					],
					['至'],
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16',
						'17', '18', '19', '20', '21', '22', '23'
					],
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
						'16',
						'17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32',
						'33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48',
						'49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'
					],
				],
				form:{},
				ei:'',
			}
		},
		onLoad(options) {
			this.form = JSON.parse(options.form)
			this.init()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			init(){
				this.timeId = this.form.businessData.week
				this.frameList = this.form.businessData.times
			},
			choose(v) {
				if (!this.timeId.includes(v.id)) {
					this.timeId.push(v.id)
				} else {
					let index = this.timeId.indexOf(v.id);
					this.timeId.splice(index, 1);
				}
			},
			confirm(e) {
				console.log('confirm', e)
				if(this.ei>=0){
					this.frameList[this.ei].start =  e.value[0] + ':' + e.value[1]
					this.frameList[this.ei].ciri =  e.value[3] + e.value[4] <= e.value[0] + e.value[1] ? true :false
					this.frameList[this.ei].end =  e.value[3] + ':' + e.value[4]
				}else{
					this.frameList.push({
						start: e.value[0] + ':' + e.value[1],
						ciri:  e.value[3] + e.value[4] <= e.value[0] + e.value[1] ? true :false,
						end: e.value[3] + ':' + e.value[4]
					})
				}
				console.log('frameList',this.frameList)
				this.show = false
			},
			edit(v,i){
				this.show = true
				this.ei = i
			},
			reduce(i) {
				this.frameList.splice(i, 1)
			},
			async save() {
				this.form.businessData.week =  this.timeId
				this.form.businessData.times =  this.frameList
				const {
					msg
				} = await this.beg.request({
					url: `${this.api.storeinfo}/${this.storeId}`,
					method: 'put',
					data: this.form,
				})
				uni.$u.toast(msg)
				getPage().$vm.fetchData()
				setTimeout(() =>{
					uni.navigateBack({
						delta: 1
					})
				},500)
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		overflow: auto;
		margin-bottom: 260rpx;
	}

	.item {
		width: 30%;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #eee;
	}

	.isItem {
		// background: #c3efd6;
	}

	/deep/.u-radio {
		margin-right: 30rpx;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0
	}
</style>